<template>
  <div class="me">
    <div class="bg">
      <div class="username">
        {{userInfo.username}}
      </div>
      <img :src="userInfo.avatar" alt="">
    </div>
    <div class="user-msg-wrap">
      <ul class="user-msg">
        <li>
          待维修
            <div class="repair-item">
              {{userRecord.repairRecord}}
            </div>
        <li>
          已完成维修
            <div class="repair-item">
              {{userRecord.all}}
            </div>
        </li>
      </ul>
    </div>
    <div class="btn-wrap">
      <Button type="danger" size="large" @click="handleLogout">退出登录</Button>
    </div>

  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {Button} from 'mint-ui'

  export default {
    name: "me",
    components: {
      Button
    },
    data() {
      return {
        userRecord: {}
      }
    },
    methods: {
      getData() {
        let params = {
          user_id: this.userInfo.id
        };

        this.$axios.get('/admin/repairRecord/userRecord', params)
          .then(res => {
            this.userRecord = res.data;
          }).catch(err => console.log(err))
      },
      handleLogout() {
        this.$store.commit('CLEAR_USER_INFO');
        this.$router.push({
          path: '/'
        })
      }
    },
    created() {
      this.getData();
    },
    computed: {
      ...mapState(['userInfo'])
    }
  }
</script>

<style scoped lang="scss">
  .me {
    .username {
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      padding-top: 43px;
    }

    .bg {
      position: relative;
      height: 150px;
      background: #26a2ff;

      img {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        box-shadow: 0 0 0 6px #fff;
        transform: translate3d(-50%, 18%, 0);
      }
    }

    .user-msg-wrap {
      color: #555;


      .user-msg {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
        padding: 10px;

        li {
          flex: 1;
          text-align: center;
        }

        li:first-child {
          border-right: 1px solid #d9d9d9;
        }

        .repair-item {
          margin-top: 6px;
          font-size: 12px;
          color: #333;
        }
      }
    }

    .btn-wrap {
      position: fixed;
      bottom: 100px;
      left: 0;
      right: 0;
      padding: 0 10px;
    }
  }

</style>
